<template>
    <t-dialog :visible="dialogVisible" size="normal" @dialog-close="cancel">
      <div slot="title" class="app-service-center-content-charter-update-dialog__title">{{ dialogTitle }}</div>
      <div slot="content" class="app-service-center-content-charter-update-dialog__content">
        <t-table :items="attrs" size="normal" type="blue" border stripe>
          <t-table-column label="时间" prop="time" width="3"></t-table-column>
          <t-table-column label="操作员" prop="operator" width="2"></t-table-column>
          <t-table-column label="行为" prop="operation" width="2"></t-table-column>
          <t-table-column label="驳回理由" prop="dismissReason" width="4"></t-table-column>
          <t-table-column label="报送状态" prop="status" width="2"></t-table-column>
        </t-table>
      </div>
      <div slot="footer" style="text-align: right;">
      </div>
    </t-dialog>
</template>

<script>
  import TDialog from '@/components/dialog';
  import TButton from '@/components/button';
  import TInput from '@/components/input';
  import TTextarea from '@/components/textarea';
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';
  
  export default {
    name: 'app-service-center-content-charter-submit-status-dialog',
    props: {
      store: {
        type: Object,
        required: true,
      },
    },
    components: {
      TButton,
      TInput,
      TTextarea,
      TTable,
      TTableColumn,
      TDialog,
    },
    data() {
      return {
        propertyAutosize: {
          minRows: 3,
          maxRows: 4,
        },
        depositAutosize: {
          minRows: 3,
          maxRows: 4,
        },
        financialAutosize: {
          minRows: 3,
          maxRows: 4,
        },
        attrs: [],
      };
    },
    computed: {
//    charters() {
//      return this.store.charters;
//    },
//    currentItem() {
//      return this.store.current.item;
//    },
//    currentInputProperty() {
//      return this.store.current.input.property;
//    },
//    currentInputDeposit() {
//      return this.store.current.input.deposit;
//    },
//    currentInputFinancial() {
//      return this.store.current.input.financial;
//    },
      dialogTitle() {
        return this.store.submitStatusDialog.title;
      },
      dialogVisible() {
        return this.store.submitStatusDialog.visible;
      },
      curItem() {
        return this.store.current.item;
      },
    },
    watch: {
      curItem(value) {
        if (value === null) return [];
        this.attrs = [];
        const target = `api/submit/status/${value.id}`;
        this.$http.request({
          url: target,
          method: 'get',
        }).then((response) => {
          this.init(response.data);
        });
        return 't';
      },
    },
    methods: {
      init(data) {
        Object.values(data).forEach((item) => {
          this.attrs.push({ time: item.time, operator: item.operator, operation: item.operation, dismissreason: item.dismissreason, status: item.state });
        });
      },
//    handleCurrentInputProperty(val) {
//      this.store.current.input.property = val;
//    },
//    handleCurrentInputDeposit(val) {
//      this.store.current.input.deposit = val;
//    },
//    handleCurrentInputFinancial(val) {
//      this.store.current.input.financial = val;
//    },
      cancel() {
        this.$emit('close');
      },
//    deleteItem() {
//      const id = this.store.current.item.id;
//      this.store.charters = this.store.charters.filter((item) => {
//        return item.id !== id;
//      });
//      this.$emit('close');
//      const target = `api/charters/${id}/actions/delete`;
//      this.$http.request({
//        url: target,
//        method: 'post',
//      }).then(() => {
//      }).catch(() => {
//      });
//    },
//    updateItem() {
//      const id = this.store.current.item.id;
//      const name = this.store.current.input.name;
//      const synopsis = this.store.current.input.synopsis;
//      Object.values(this.store.charters).forEach((item) => {
//        if (item.id === id) {
//          item.name = name;
//          item.synopsis = synopsis;
//        }
//      });
//      this.$emit('close');
//      const target = `api/charters/${id}`;
//      this.$http.request({
//        url: target,
//        method: 'put',
//        data: {
//          name,
//          synopsis,
//        },
//        transformRequest: [(data) => {
//          const encodeName = encodeURIComponent(data.name);
//          const encodeSynopsis = encodeURIComponent(data.synopsis);
//          return `name=${encodeName}&synopsis=${encodeSynopsis}`;
//        }],
//      }).then(() => {
//      }).catch(() => {
//      });
//    },
//    createItem() {
//      const name = this.store.current.input.name;
//      const synopsis = this.store.current.input.synopsis;
//      const target = 'api/charters';
//      this.$http.request({
//        url: target,
//        method: 'post',
//        data: {
//          name,
//          synopsis,
//        },
//        transformRequest: [(data) => {
//          const encodeName = encodeURIComponent(data.name);
//          const encodeSynopsis = encodeURIComponent(data.synopsis);
//          return `name=${encodeName}&synopsis=${encodeSynopsis}`;
//        }],
//      }).then((response) => {
//        const item = response.data.payload;
//        const createDate = this.dateFormat(item.createTime);
//        const updateDate = this.dateFormat(item.updateTime);
//        this.store.charters.push({
//          index: this.store.charters.length + 1,
//          name: item.name,
//          createDate,
//          updateDate,
//          id: item.id,
//          synopsis: item.synopsis,
//        });
//        this.$emit('close');
//      }).catch(() => {
//      });
//    },
//    dateFormat(ut) {
//      const day = ut.dayOfMonth;
//      const dayValue = day < 10 ? `0${day}` : `${day}`;
//      return `${ut.year}-${ut.monthValue}-${dayValue}`;
//    },
    },
  };
</script>